<template>
    <!-- 页面容器，设置渐变背景 -->
    <Navbar title="一般性访客" />
    <view
        class="flex flex-col items-center min-h-screen bg-gradient-to-b from-blue-200 to-green-100 p-4">
        <!-- 标题区域 -->
        <view class="text-center mb-6 mt-6">
            <text class="text-xl font-bold text-blue-800">自有货车进出登记</text>
        </view>

        <!-- 二维码卡片 -->
        <view class="w-80 h-80 bg-white rounded-lg shadow p-4 pb-0! flex flex-col items-center justify-center">
            <!-- 实际开发中替换为真实二维码图片或生成逻辑 -->
            <QiyanQrcode size="200" @click="title2 = '2.现在时间戳：' + Date.now()" :text="'dsad'" foreground="#317df5"
                id="qrcode1">
            </QiyanQrcode>
            <text class="mt-4 text-sm text-orange-600">请将该二维码出示给司机，让其填写</text>
        </view>

        <!-- 操作按钮区域 -->
        <view class="flex space-x-6 mt-6 w-full">
            <TnButton type="info" class="w-full! h-[80rpx] bg-[red] mr-2">
                作废
            </TnButton>
            <TnButton type="primary" class="w-full! h-[80rpx] ml-2" @click="onSubmit">
                填写完成
            </TnButton>
        </view>

        <!-- 使用说明区域 -->
        <view class="mt-4 text-gray-700 text-[24rpx] leading-relaxed">
            <text class="font-semibold block mb-2">使用说明：</text>
            <text class="block">1、需先出示给司机填写</text>
            <text class="block">2、司机填写无误后，提交后再点击填写完成按钮，补齐信息！</text>
            <text class="block">3、若信息填写错误，请点击作废或者返回首页重新生成二维码！</text>
            <text class="block">4、二维码有效期10分钟，请尽快完成填写！</text>
        </view>
    </view>
</template>

<script setup>
import { Navbar } from "@/components/navbar";
import QiyanQrcode from "@/components/qiyan-qrcode/qiyan-qrcode.vue"
import { TnButton } from "@tuniao/tnui-vue3-uniapp";
import { ref } from 'vue';
</script>

<style lang="scss">
/* 可在此补充额外的样式覆盖或扩展 UnoCSS 未覆盖的细节 */
</style>